<template>
  <div class="tech-container">
    <div class="main-content">
      <!-- 左侧视频区域 -->
      <div class="video-section">
        <!-- 视频标题栏 -->
        <div class="video-header">
          <div class="header-left">
            <i class="el-icon-video-camera"></i>
            实时监控区域 #A1
          </div>
          <div class="header-right">
            <span><i class="el-icon-video-camera"></i> 1080P</span>
            <span><i class="el-icon-timer"></i> 60FPS</span>
            <span><i class="el-icon-connection"></i> 5G</span>
          </div>
        </div>

        <!-- 视频播放区域 -->
        <div id="video-container" class="video-player">
          <!-- 四角装饰 -->
          <div class="corner-lt"></div>
          <div class="corner-rt"></div>
          <div class="corner-lb"></div>
          <div class="corner-rb"></div>
          
          <!-- 扫描动画 -->
          <div class="scan-line"></div>
          <div class="scan-box"></div>

          <!-- 数据覆盖层 -->
          <div class="data-overlay">
            <div class="data-group">
              <div class="data-item"><i class="el-icon-success"></i> 状态: 在线</div>
              <div class="data-item"><i class="el-icon-connection"></i> 信号: 87%</div>
            </div>
            <div class="data-group">
              <div class="data-item"><i class="el-icon-loading"></i> AI分析中...</div>
              <div class="data-item"><i class="el-icon-time"></i> {{currentTime}}</div>
              <div class="data-item"><i class="el-icon-location"></i> 坐标: 30°N 114°E</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧控制面板 -->
      <div class="control-section">
        <div class="control-header">
          <span>云台控制系统</span>
          <span class="status">已连接</span>
        </div>
        
        <!-- 方向控制 -->
        <div class="direction-control">
          <div class="control-grid">
            <!-- 方向按钮 -->
            <el-button-group>
              <el-button class="control-btn" @click="directionControl(4)"><i class="el-icon-top-left"></i></el-button>
              <el-button class="control-btn" @click="directionControl(0)"><i class="el-icon-top"></i></el-button>
              <el-button class="control-btn" @click="directionControl(6)"><i class="el-icon-top-right"></i></el-button>
            </el-button-group>
            <el-button-group>
              <el-button class="control-btn" @click="directionControl(2)"><i class="el-icon-back"></i></el-button>
              <el-button class="control-btn stop-btn" @click="stopTurn"><i class="el-icon-video-play"></i></el-button>
              <el-button class="control-btn" @click="directionControl(3)"><i class="el-icon-right"></i></el-button>
            </el-button-group>
            <el-button-group>
              <el-button class="control-btn" @click="directionControl(5)"><i class="el-icon-bottom-left"></i></el-button>
              <el-button class="control-btn" @click="directionControl(1)"><i class="el-icon-bottom"></i></el-button>
              <el-button class="control-btn" @click="directionControl(7)"><i class="el-icon-bottom-right"></i></el-button>
            </el-button-group>
          </div>
        </div>

        <!-- 变焦控制 -->
        <div class="zoom-control">
          <div class="control-title">变焦控制</div>
          <el-slider v-model="zoomLevel" :min="1" :max="10" />
        </div>

        <!-- 功能开关 -->
        <div class="function-switches">
          <el-switch v-model="nightMode" active-text="夜视模式" class="tech-switch" />
          <el-switch v-model="autoTracking" active-text="自动追踪" class="tech-switch" />
        </div>
      </div>
    </div>

    <!-- 底部检测系统 -->
    <div class="detection-system">
      <div class="detection-card entry">
        <div class="card-header">
          <div class="dot-indicator"></div>
          <span>入场检测系统</span>
          <span class="status">系统就绪</span>
        </div>
        <el-upload
          v-model:file-list="fileList"
          :action="uploadUrl"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :headers="{'Authorization':'Bearer '+ token}"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>
      </div>

      <div class="detection-card exit">
        <div class="card-header">
          <div class="dot-indicator"></div>
          <span>出场检测系统</span>
          <span class="status">系统就绪</span>
        </div>
        <el-upload
          v-model:file-list="fileList1"
          :action="outUploadUrl"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :headers="{'Authorization':'Bearer '+ token}"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>
      </div>
    </div>
  </div>
</template>

<script>
import EZUIKit from "ezuikit-js";
import axios from "axios";
import { getToken } from '@/utils/auth'
export default {
  mounted() {
    this.initEZUIKitPlayer();
    this.initializeMonitoring();
  },
  data() {
    return {
      eZUIKitPlayer: null,
      accessToken:
        "at.7yliog3a10zjrnm320bsq5t6443vutzt-8l08cm00j7-1oje6yu-vjcdnye4d",
      accessUrl: "ezopen://open.ys7.com/BD7300843/1.hd.live",
      dialogImageUrl: '',
      dialogVisible: false,
      token:null,
      fileList: [],
      uploadUrl:process.env.VUE_APP_BASE_API + "/system/camara/recognition",
      outUploadUrl:process.env.VUE_APP_BASE_API + "/system/camara/outRecognition",
      dialogImageUrl1: '',
      dialogVisible1: false,
      fileList1: [],
      currentTime: '',
      zoomLevel: 1,
      nightMode: false,
      autoTracking: false,
      activeTargets: [
        { id: 1, type: '人员-A', x: 30, y: 40 },
        { id: 2, type: '车辆-B', x: 60, y: 70 }
      ]
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      console.log(file,"------------>>>>>>>>>>")
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //停止控制控制云台
    stopTurn() {
      axios({
        url: "https://open.ys7.com/api/lapp/device/ptz/stop",
        method: "post",
        params: {
          accessToken: this.accessToken,
          // direction:num,
          channelNo: 1, // 通道号
          deviceSerial: "BD7300843", //序列号
        },
        timeout: 2000,
      }).then((res) => {
        //  console.log(res.data)
        if (res.data.code == "60000") {
          this.$message(res.data.msg);
        }
      });
    },
    // 云平台控制
    directionControl(num) {
      axios({
        url: "https://open.ys7.com/api/lapp/device/ptz/start",
        method: "post",
        params: {
          accessToken: this.accessToken, //accesstoken码，一般一周过期
          speed: 2, //旋转速度
          direction: num, //方向，传入数字，对应数字在api文档有
          channelNo: 1, // 通道号
          deviceSerial: "BD7300843", //序列号
        },
        timeout: 2000,
      }).then((res) => {
        if (res.data.code == "60000") {
          this.$message(res.data.msg);
        }
      });
    },
    // 初始化萤石云视频对接
    initEZUIKitPlayer() {
      this.eZUIKitPlayer = new EZUIKit.EZUIKitPlayer({
        id: "video-container",
        accessToken: this.accessToken,
        url: this.accessUrl,
        header: ["capturePicture", "save", "zoom"],
        footer: ["fullScreen"],
        width: 800,
        height: 600,
        autoplay: true,
        audio: 1,
        template: "simple",
      });
    },
    getTokenUser() {
      this.token =  getToken()
      console.log(this.token,"------->>>>>>>>>>>>>>>>>>>>>>")
    },
    updateCurrentTime() {
      const now = new Date();
      this.currentTime = now.toLocaleTimeString();
    },
    initializeMonitoring() {
      setInterval(this.updateCurrentTime, 1000);
      
      setInterval(() => {
        this.activeTargets = this.activeTargets.map(target => ({
          ...target,
          x: Math.min(90, Math.max(10, target.x + (Math.random() - 0.5) * 10)),
          y: Math.min(90, Math.max(10, target.y + (Math.random() - 0.5) * 10))
        }));
      }, 2000);
    }
  },
  created() {
    this.getTokenUser()
  }
};
</script>


<style lang="scss" scoped>
.tech-container {
  padding: 20px;
  background: #000913;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.main-content {
  display: flex;
  gap: 20px;
  height: calc(100vh - 300px);
}

.video-section {
  flex: 1;
  background: rgba(0, 255, 242, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(0, 255, 242, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.video-header {
  padding: 15px 20px;
  background: rgba(0, 13, 23, 0.8);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #00fff2;
  border-bottom: 1px solid rgba(0, 255, 242, 0.1);

  .header-right {
    display: flex;
    gap: 20px;
    
    span {
      display: flex;
      align-items: center;
      gap: 5px;
    }
  }
}

.video-player {
  flex: 1;
  position: relative;
  background: #000;
  
  .corner-lt, .corner-rt, .corner-lb, .corner-rb {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 2px solid #00fff2;
    opacity: 0.8;
  }

  .corner-lt { top: 20px; left: 20px; border-right: none; border-bottom: none; }
  .corner-rt { top: 20px; right: 20px; border-left: none; border-bottom: none; }
  .corner-lb { bottom: 20px; left: 20px; border-right: none; border-top: none; }
  .corner-rb { bottom: 20px; right: 20px; border-left: none; border-top: none; }
}

.control-section {
  width: 320px;
  background: rgba(0, 255, 242, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(0, 255, 242, 0.1);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.control-header {
  text-align: center;
  color: #00fff2;
  font-size: 18px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(0, 255, 242, 0.1);
  
  .status {
    font-size: 14px;
    margin-left: 10px;
    color: rgba(0, 255, 242, 0.7);
  }
}

.direction-control {
  .control-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }
}

.control-btn {
  width: 50px;
  height: 50px;
  background: rgba(0, 255, 242, 0.1);
  border: 1px solid rgba(0, 255, 242, 0.3);
  color: #00fff2;
  
  &:hover {
    background: rgba(0, 255, 242, 0.2);
    border-color: #00fff2;
    box-shadow: 0 0 15px rgba(0, 255, 242, 0.4);
  }
  
  &.stop-btn {
    background: rgba(0, 255, 242, 0.2);
  }
}

.detection-system {
  display: flex;
  gap: 20px;
  height: 220px;
}

.detection-card {
  flex: 1;
  background: rgba(0, 255, 242, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(0, 255, 242, 0.1);
  padding: 20px;
  
  &.entry { border-left: 3px solid #00fff2; }
  &.exit { border-left: 3px solid #ff3e3e; }

  .card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #00fff2;
    margin-bottom: 20px;

    .dot-indicator {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #00fff2;
      animation: pulse 2s infinite;
    }

    .status {
      margin-left: auto;
      font-size: 12px;
      opacity: 0.8;
    }
  }
}

// 自定义Element Plus组件样式
:deep(.el-slider__runway) {
  background-color: rgba(0, 255, 242, 0.1);
}

:deep(.el-slider__bar) {
  background-color: #00fff2;
}

:deep(.el-slider__button) {
  border-color: #00fff2;
  background-color: #000913;
}

:deep(.el-upload--picture-card) {
  background: rgba(0, 255, 242, 0.05);
  border: 1px dashed rgba(0, 255, 242, 0.3);
  
  &:hover {
    border-color: #00fff2;
  }
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}
</style>


